<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>看一看小知识</title>

    <!-- 引入样式 -->
    <link rel="stylesheet" href="../plugins/element-ui/index.css"/>
    <link rel="stylesheet" href="../styles/page.css"/>
    <link rel="stylesheet" href="../css/currency.css">
    <link rel="stylesheet" href="../css/optgroups.css">
    <style>
        body {
            background: rgba(247, 253, 242, 0.84);
        }
    </style>

</head>
<body>

<!--*****************************************************************************************************************-->

<!-- 标题 -->
<div class="boc">
    <h1>
        <a href="knowledge.html">
            <b>知识</b>
        </a>
    </h1>
</div>

<!--*****************************************************************************************************************-->

<!-- 主要：盒子模型数据 -->
<div class="dashboard-container" id="member-app">
    <div class="container">
        <div class="tableBar">

            <!-- 返回测算页面 -->
            <a href="mhys.html" style="color: white">
                <el-button
                        round
                        type="primary"
                        title="返回测算页面"
                >
                    ←返回
                </el-button>
            </a>

            <!-- 刷新页面 -->
            <el-button
                    round
                    type="warning"
                    title="重新获取数据"
                    @click="success()"
            >
                刷新
            </el-button>
        </div>

        <!-- 数据列表 -->
        <el-table
                :data="tableData"
                stripe
                class="tableBox"
        >
            <el-table-column
                    width="150"
                    prop="info"
                    label="信息"
            ></el-table-column>
            <el-table-column
                    prop="jieDu"
                    label="信息解读"
            ></el-table-column>
        </el-table>

        <!-- 分页条 -->
        <el-pagination
                class="pageList"
                :page-sizes="[10, 19, 27, 31, 39]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="counts"
                :current-page.sync="page"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange">
        </el-pagination><br>

        <!-- 更多功能 -->
        <el-button
                round
                type="success"
                @click="more()"
                title="更多功能"
        >
            更多功能
        </el-button>

    </div>
</div>

<!--*****************************************************************************************************************-->

<!-- 引入各类组件 -->
<script src="../plugins/vue/vue.js"></script>
<script src="../plugins/element-ui/index.js"></script>
<script src="../plugins/axios/axios.min.js"></script>
<script src="../js/request.js"></script>
<script type="text/javascript" src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script src="../api/api.js"></script>

<!--*****************************************************************************************************************-->

<script>

    new Vue({
        el: '#member-app',
        data() {
            return {
                input: '',
                counts: 0,
                page: 1,
                pageSize: 10,
                tableData: [],
                id: '',
                status: '',
            }
        },

        computed: {},

        // 钩子函数
        created() {
            this.init()
        },
        mounted() {
        },

        // 方法
        methods: {

            // ★★★查询
            async init() {
                const params = {
                    page: this.page,
                    pageSize: this.pageSize,
                }
                await kykPage(params).then(res => {
                    if (String(res.code) === '1') {
                        this.tableData = res.data.records || []
                        this.counts = res.data.total
                    }
                }).catch(err => {
                    this.$message.error('请求出错：' + err)
                })
            },

            // ★★★重新查询
            handleQuery() {
                this.page = 1; // 页数
                this.init(); // 查询
            },

            // // ★★★更多信息
            // more() {
            //     <a href="https://ja0.cn/"/>
            // }

            /**
             * 【功能正在完善中】弹框
             */
            more() {
                // 弹框提示
                this.$alert('功能正在完善中~', '提示', {
                    confirmButtonText: '确定',
                    callback: action => {
                        this.$message({
                            showClose: true, // 可关闭弹窗
                            type: 'success',  // 样式
                            message: '继续浏览吧~'
                        });
                    }
                });
            },

            /**
             * 上边栏【刷新成功】弹窗
             */
            success() {
                // 调取方法
                this.handleQuery()
                // 弹框提示
                this.$notify({
                    title: '已刷新',
                    type: 'success'
                });
            },

            /**
             * 右边栏【操作成功】弹窗
             */
            operation() {
                // 调取方法
                this.handleQuery()
                // 弹框提示
                this.$notify({
                    title: '操作成功',
                    type: 'success'
                });
            },

            // 翻页
            handleSizeChange(val) {
                this.pageSize = val
                this.init()
                this.operation()
            },
            handleCurrentChange(val) {
                this.page = val
                this.init()
                this.operation()
            }

        }

    })

</script>

<!--*****************************************************************************************************************-->

</body>
</html>